<!-- 微信支付信息 -->
<!-- 公众号信息  -->
<template>
    <div class='bgff h100 pd  dfgfdgtrt'>
        <div class=" sdfgdgdfyt">
            <n-form ref="formRef" label-width="120" :inline="false" size="normal" label-placement="left">
                <n-grid :cols="24" :x-gap="20">
                    <n-form-item-gi span="24" label="商户号：" path="" class="mt20">
                        <n-input v-model:value="formValue.merchantId" type="text" placeholder="商户号" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="证书序列号：" path="" class="mt20">
                        <n-input v-model:value="formValue.merchantCertificateSerial" type="text" placeholder="请输入证书序列号"
                            size="medium" clearable></n-input>
                    </n-form-item-gi>

                    <n-form-item-gi span="24" label="秘钥：" path="" class="mt20">
                       <div class=" display-flex">
                        <n-input v-model:value="formValue.apiv3_private_key" type="text" placeholder="请输入秘钥" size="medium"
                            clearable></n-input>
                            <span @click="sdrttyer('https://kf.qq.com/faq/180830E36vyQ180830AZFZvu.html')" class="ml20 sz ls jzhh vertical-center">点击查看指引</span>
                       </div>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="支付回调地址：" path="" class="mt20">
                        <n-input v-model:value="formValue.callBack" type="text" placeholder="请输入支付回调地址" size="medium"
                            clearable></n-input>
                        <!-- <div class="iconfont dx-help z9 fz18 sz question-mark-icon">
                            <n-image src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/adminimg/gzhappid.png"
                                class="imgsjnnee" />
                        </div> -->
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="证书文件内容：" path="" class="mt20">
                     <div class="dsfdsgdrfytryt display-flex">
                        <div class="w100">
                            <n-input v-model:value="formValue.pem" type="textarea" :autosize="{ minRows: 6 }"
                                placeholder="请输入证书文件内容" size="medium" clearable></n-input>
                           
                        </div>
                        <!-- <div class="iconfont dx-help z9 fz18 sz ">
                                <n-image
                                    src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/adminimg/gzhappid.png"
                                    class="imgsjnnee" />
                            </div> -->
                     </div>
                        <n-button type="primary" size="medium" @click="saveFun" class="mt40">保存</n-button>
                    </n-form-item-gi>


                </n-grid>
            </n-form>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import { callBack, dxpost, qurl, dxget } from "../../../util/index"
const sxname = 'WeChatPayinfo'
const apiurl = 'dxgjAdmin/dxglobalSetting'
const isbj = ref(false) // 是否为编辑的状态
let bjid = 0
const formValue = ref({
    merchantId: "",
    merchantCertificateSerial: "",
    apiv3_private_key: "",
    callBack: "",
    pem: ""
})
const sdrttyer = (url)=>{
    open(url)
}
const initData = async () => {
    const { data }: any = await dxget(apiurl, { sxname, roleId: localStorage.id })
    if (data.length <= 0) {
        return
    }
    isbj.value = true
    bjid = data[0].id
    const dataw = JSON.parse(data[0].text)
    if (dataw.merchantId) {
        formValue.value.merchantId = dataw.merchantId
    }
    if (dataw.merchantCertificateSerial) {
        formValue.value.merchantCertificateSerial = dataw.merchantCertificateSerial
    }
    if (dataw.apiv3_private_key) {
        formValue.value.apiv3_private_key = dataw.apiv3_private_key
    }
    if (dataw.callBack) {
        formValue.value.callBack = dataw.callBack
    }
    if (dataw.pem) {
        formValue.value.pem = dataw.pem
    }
}
initData()
const saveFun = async () => {
    if (!isbj.value) {
        const { errno }: any = await dxpost(apiurl, { sxname, roleId: localStorage.id, text: JSON.stringify(formValue.value) })
        if (errno == 0) {
            window.$message.success('操作成功！')
            return
        }
    } else {
        const { errno }: any = await dxpost(apiurl, { id: bjid, text: JSON.stringify(formValue.value) }, 'put')
        if (errno == 0) {
            window.$message.success('保存成功！')
        }
    }

}
</script>
<style scoped>
.sdfgdgdfyt {
    width: 600px;
}

.dsfdsgdrfytryt {
    width: 1200px;
}

.logo-context {
    border: 1px dashed #999;
    width: 250px;
    height: 100px;
    text-align: center;
    color: #999;
    cursor: pointer;
    background: #e0e0e0;
}

.logo-context.ab {
    width: 94px;
    height: 94px;
}

.logo-context.ac {
    width: 600px;
    height: 300px;
}

.from-box-ks {
    max-width: 560px;
}

.question-mark-icon {
    position: absolute;
    right: -40px;
    top: 0;
    width: 20px;
    height: 20px;
}

.imgsjnnee {
    opacity: 0;
}

.imgsjnnee {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
}

.save-btn {
    width: 120px;
}</style>